<template>
  <div class="activity-detail">
    <!-- 页面标题 -->
    <div class="page-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><router-link to="/">首页</router-link></el-breadcrumb-item>
        <el-breadcrumb-item><router-link to="/activities">活动列表</router-link></el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <el-skeleton animated :rows="10" />
    </div>

    <!-- 活动详情内容 -->
    <div v-else-if="activity" class="detail-content">
      <!-- 活动头部信息 -->
      <div class="activity-header card">
        <div class="header-image">
          <img :src="activity.coverImage || '/default-activity.jpg'" alt="活动封面" />
        </div>
        <div class="activity-basic-info">
          <div class="activity-meta">
            <span class="activity-category">{{ getCategoryName(activity.categoryId) }}</span>
            <span v-if="activity.isHot" class="activity-status hot">热门活动</span>
            <span v-else class="activity-status" :class="getStatusClass(activity.status)">
              {{ getStatusText(activity.status) }}
            </span>
          </div>
          <h1 class="activity-title">{{ activity.title }}</h1>
          <div class="activity-stats">
            <div class="stat-item">
              <el-icon><calendar /></el-icon>
              <span>{{ formatDate(activity.startTime) }} - {{ formatDate(activity.endTime) }}</span>
            </div>
            <div class="stat-item">
              <el-icon><location /></el-icon>
              <span>{{ activity.location }}</span>
            </div>
            <div class="stat-item">
              <el-icon><user /></el-icon>
              <span>{{ activity.participantCount || 0 }} 人已报名 / {{ activity.maxParticipants || '不限' }} 人</span>
            </div>
          </div>
          <div class="activity-actions">
            <el-button
              v-if="canRegister"
              type="primary"
              size="large"
              :loading="registering"
              @click="handleRegister"
            >
              立即报名
            </el-button>
            <el-button
              v-else-if="registered"
              type="danger"
              size="large"
              :loading="cancelling"
              @click="handleCancelRegister"
            >
              取消报名
            </el-button>
            <el-button
              v-else-if="!isAuthenticated"
              type="primary"
              size="large"
              @click="goToLogin"
            >
              登录后报名
            </el-button>
            <el-button
              v-if="isOwner"
              type="success"
              size="large"
              @click="editActivity"
            >
              编辑活动
            </el-button>
            <el-button
              v-if="isOwner && activity.status !== 'ENDED'"
              type="warning"
              size="large"
              @click="handleDeleteActivity"
              :loading="deleting"
            >
              删除活动
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 活动内容详情 -->
      <div class="activity-content">
        <div class="content-left">
          <div class="card">
            <h2 class="section-title">活动详情</h2>
            <div class="activity-description" v-html="activity.description"></div>
          </div>
          
          <!-- 活动评价 -->
          <div class="card comments-section">
            <div class="section-header">
              <h2 class="section-title">活动评价</h2>
              <div class="score-summary">
              <span class="average-score">{{ averageScore || 0.0 }}</span>
                <div class="stars">
                  <el-rate v-model="displayScore" disabled show-score score-template="" />
                </div>
                <span class="comment-count">({{ commentCount }}条评价)</span>
              </div>
            </div>
            <div class="comments-list">
              <div v-for="comment in comments" :key="comment.id" class="comment-item">
                <div class="comment-header">
                  <div class="comment-user">
                    <img :src="comment.userAvatar || '/default-avatar.png'" alt="用户头像" class="user-avatar" />
                    <span class="user-name">{{ comment.userNickname || comment.userName }}</span>
                  </div>
                  <div class="comment-score">
                    <el-rate v-model="comment.score" disabled show-score score-template="{value}分" />
                  </div>
                </div>
                <p class="comment-content">{{ comment.content }}</p>
                <span class="comment-time">{{ formatDate(comment.createdTime) }}</span>
              </div>
              <div v-if="comments.length === 0" class="empty-comments">
                <el-empty description="暂无评价" />
              </div>
            </div>
            <div class="comments-pagination">
              <el-pagination
                v-if="commentCount > commentPageSize"
                v-model:current-page="commentPageNum"
                v-model:page-size="commentPageSize"
                :page-sizes="[5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="commentCount"
                @size-change="handleCommentSizeChange"
                @current-change="handleCommentCurrentChange"
              />
            </div>
          </div>
        </div>
        
        <div class="content-right">
          <!-- 主办方信息 -->
          <div class="card">
            <h2 class="section-title">主办方</h2>
            <div class="organizer-info">
              <img :src="organizerAvatar || '/default-avatar.png'" alt="主办方头像" class="organizer-avatar" />
              <div class="organizer-details">
                <h3 class="organizer-name">{{ organizerName }}</h3>
                <p class="organizer-description">发布了 {{ organizerActivityCount }} 个活动</p>
              </div>
            </div>
          </div>
          
          <!-- 活动信息 -->
          <div class="card">
            <h2 class="section-title">活动信息</h2>
            <div class="info-table">
              <div class="info-row">
                <span class="info-label">报名开始</span>
                <span class="info-value">{{ formatDate(activity.registrationStartTime) }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">报名结束</span>
                <span class="info-value">{{ formatDate(activity.registrationEndTime) }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">发布时间</span>
                <span class="info-value">{{ formatDate(activity.createdAt) }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">最后更新</span>
                <span class="info-value">{{ formatDate(activity.updatedAt) }}</span>
              </div>
            </div>
          </div>
          
          <!-- 相关活动 -->
          <div class="card">
            <h2 class="section-title">相关活动</h2>
            <div class="related-activities">
              <div v-for="related in relatedActivities" :key="related.id" class="related-item">
                <router-link :to="'/activity/' + related.id" class="related-link">
                  <h3 class="related-title">{{ truncateText(related.title, 20) }}</h3>
                  <p class="related-info">{{ formatDate(related.startTime, 'MM-DD') }} · {{ related.participantCount }}人报名</p>
                </router-link>
              </div>
              <div v-if="relatedActivities.length === 0" class="empty-related">
                <p>暂无相关活动</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 评价对话框 -->
      <el-dialog
        v-model="showCommentDialog"
        title="评价活动"
        width="500px"
        @close="resetCommentForm"
      >
        <el-form :model="commentForm" :rules="commentRules" ref="commentFormRef">
          <el-form-item label="评分" prop="score">
            <el-rate v-model="commentForm.score" clearable />
          </el-form-item>
          <el-form-item label="评价内容" prop="content">
            <el-input
              v-model="commentForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入您的评价..."
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showCommentDialog = false">取消</el-button>
            <el-button type="primary" :loading="submittingComment" @click="handleSubmitComment">提交</el-button>
          </span>
        </template>
      </el-dialog>


    </div>

    <!-- 错误状态 -->
    <div v-else class="error-state">
      <el-empty description="活动不存在或已被删除" />
      <el-button type="primary" style="margin-top: 20px" @click="goBack">
        返回活动列表
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Calendar, Location, User } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getActivityDetail, deleteActivity } from '../api/activity'
import { getCategoryList } from '../api/category'
import { registerActivity, cancelRegistration, getRegistrationStatus, getUserRegistrations } from '../api/registration'
import {getActivityComments, createComment, getActivityScore, checkUserComment, getCommentCount} from '../api/comment'
import { mapStatusToFrontend } from '../utils/common'

export default {
  name: 'ActivityDetail',
  components: {
    Calendar,
    Location,
    User
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const displayScore = ref(0)
    const registering = ref(false)
    const cancelling = ref(false)
    const deleting = ref(false)
    const submittingComment = ref(false)
    const registered = ref(false)
    const relatedActivities = ref([])
    const showCommentDialog = ref(false)
    const commentPageNum = ref(1)
    const commentPageSize = ref(10)
    
    // 数据存储
    const activity = ref({})
    const comments = ref([])
    const averageScore = ref(0)
    const commentCount = ref(0)
    const canComment = ref(false)
    const categories = ref([])
    const loading = ref(false)
    
    // 评价表单
    const commentForm = ref({
      score: 5,
      content: ''
    })
    
    const commentRules = {
      score: [
        { required: true, message: '请选择评分', trigger: 'change' }
      ],
      content: [
        { required: true, message: '请输入评价内容', trigger: 'blur' },
        { min: 10, message: '评价内容至少10个字符', trigger: 'blur' }
      ]
    }
    
    const commentFormRef = ref(null)
    
    // 用户认证状态
    const isAuthenticated = ref(false)
    const currentUserId = ref(null)
    
    // 获取用户信息
    const fetchUserInfo = async () => {
      try {
        const userInfo = localStorage.getItem('userInfo')
        if (userInfo) {
          const user = JSON.parse(userInfo)
          isAuthenticated.value = true
          currentUserId.value = user.id
        } else {
          isAuthenticated.value = false
          currentUserId.value = null
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        isAuthenticated.value = false
        currentUserId.value = null
      }
    }
    
    const isOwner = computed(() => {
      return isAuthenticated.value && activity.value.creatorId === currentUserId.value
    })
    
    const canRegister = computed(() => {
      if (!isAuthenticated.value) return false
      if (registered.value) return false
      
      // 将后端返回的整数值状态转换为前端使用的字符串值
      const mappedStatus = mapStatusToFrontend(activity.value.status)
      if (mappedStatus !== 'PUBLISHED' && mappedStatus !== 'ONGOING') return false
      
      const now = new Date()
      const regStart = activity.value.registrationStartTime ? new Date(activity.value.registrationStartTime) : now
      const regEnd = activity.value.registrationEndTime ? new Date(activity.value.registrationEndTime) : new Date(now.getTime() + 1000 * 60 * 60 * 24)
      
      return now >= regStart && now <= regEnd
    })
    
    const organizerName = computed(() => {
      return activity.value.creatorName || activity.value.organizerName || '未知主办方'
    })
    
    const organizerAvatar = computed(() => {
      return activity.value.creatorAvatar || activity.value.organizerAvatar || '/default-avatar.png'
    })
    
    const organizerActivityCount = computed(() => {
      return activity.value.organizerActivityCount || 0
    })
    
    // 获取分类名称
    const getCategoryName = (categoryId) => {
      const category = categories.value.find(c => c.id === categoryId)
      return category ? category.name : '未分类'
    }
    
    // 获取活动详情
    const fetchActivityDetail = async (activityId) => {
      try {
        loading.value = true
        const response = await getActivityDetail(activityId)
        activity.value = response.data
        
        // 检查用户是否已报名
        if (isAuthenticated.value) {
          try {
            const registrationResponse = await getRegistrationStatus(activityId)
            registered.value = registrationResponse.registered || false
          } catch (error) {
            console.error('获取报名状态失败:', error)
            registered.value = false
          }
        }
      } catch (error) {
        ElMessage.error('获取活动详情失败')
        console.error('获取活动详情失败:', error)
      } finally {
        loading.value = false
      }
    }
    
    // 获取评论信息
    const fetchCommentInfo = async (activityId) => {
      try {
        const response = await getActivityComments({
          activityId,
          pageNum: commentPageNum.value,
          pageSize: commentPageSize.value
        })
        comments.value = response.data || []
        commentCount.value = response.total || 0
        console.log(response)

        // 获取平均评分
        const scoreResponse = await getActivityScore(activityId)
        averageScore.value = scoreResponse.averageScore || 0
        
        // 获取评论数量
        const countResponse = await getCommentCount(activityId)
        commentCount.value = countResponse.commentCount || 0
        
        // 检查是否可以评论（是否已评论过）
        if (isAuthenticated.value) {
          try {
            const checkResponse = await checkUserComment(activityId)
            canComment.value = !(checkResponse.commented || false)
          } catch (error) {
            console.error('检查评论状态失败:', error)
            canComment.value = true
          }
        } else {
          canComment.value = false
        }
      } catch (error) {
        console.error('获取评论信息失败:', error)
      }
    }
    
    // 报名活动
    const handleRegister = async () => {
      try {
        registering.value = true
        await registerActivity({ activityId: activity.value.id })
        ElMessage.success('报名成功')
        registered.value = true
        // 重新获取活动详情以更新参与人数
        await fetchActivityDetail(activity.value.id)
      } catch (error) {
        ElMessage.error(error.message || '报名失败')
        console.error('报名活动失败:', error)
      } finally {
        registering.value = false
      }
    }
    
    // 取消报名
    const handleCancelRegister = async () => {
      try {
        await ElMessageBox.confirm('确定要取消报名吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        cancelling.value = true
        // 先获取报名记录ID，然后取消报名
        const registrationsResponse = await getUserRegistrations({ 
          current: 1, 
          size: 10 
        })
        const userRegistrations = registrationsResponse.data || []
        const registration = userRegistrations.find(r => r.activityId === activity.value.id)
        
        if (registration) {
          await cancelRegistration(registration.id)
          ElMessage.success('已取消报名')
          registered.value = false
          // 重新获取活动详情以更新参与人数
          await fetchActivityDetail(activity.value.id)
        } else {
          ElMessage.error('未找到报名记录')
        }
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('取消报名失败')
          console.error('取消报名失败:', error)
        }
      } finally {
        cancelling.value = false
      }
    }
    
    // 删除活动
      const handleDeleteActivity = async () => {
        try {
          await ElMessageBox.confirm('确定要删除该活动吗？删除后不可恢复！', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
          
          deleting.value = true
          await deleteActivity(activity.value.id)
          ElMessage.success('删除成功')
          router.push('/activities')
        } catch (error) {
          if (error !== 'cancel') {
            ElMessage.error('删除失败')
            console.error('删除活动失败:', error)
          }
        } finally {
          deleting.value = false
        }
      }
    
    // 编辑活动
      const editActivity = () => {
        router.push(`/activity/edit/${activity.value.id}`)
      }




    
    // 去登录
    const goToLogin = () => {
      router.push({
        path: '/login',
        query: { redirect: route.fullPath }
      })
    }
    
    // 返回活动列表
    const goBack = () => {
      router.push('/activities')
    }
    
    // 提交评价
    const handleSubmitComment = async () => {
      if (!isAuthenticated.value) {
        goToLogin()
        return
      }
      try {
        await commentFormRef.value.validate()
        submittingComment.value = true
        
        await createComment({
          activityId: activity.value.id,
          score: commentForm.value.score,
          content: commentForm.value.content
        })
        
        ElMessage.success('评价提交成功')
        showCommentDialog.value = false
        resetCommentForm()
        // 重新获取评论列表和评分信息
        await fetchCommentInfo(activity.value.id)
      } catch (error) {
        ElMessage.error(error.message || '评价提交失败')
        console.error('评价失败:', error)
      } finally {
        submittingComment.value = false
      }
    }
    
    // 重置评价表单
    const resetCommentForm = () => {
      commentForm.value = {
        score: 5,
        content: ''
      }
      commentFormRef.value?.resetFields()
    }
    
    // 处理评价分页变化
      const handleCommentSizeChange = (size) => {
        commentPageSize.value = size
        fetchCommentInfo(route.params.id)
      }

      const handleCommentCurrentChange = (current) => {
        commentPageNum.value = current
        fetchCommentInfo(route.params.id)
      }
    
    // 获取状态文本
      const getStatusText = (status) => {
        const mappedStatus = mapStatusToFrontend(status)
        const statusMap = {
          'DRAFT': '草稿',
          'PUBLISHED': '已发布',
          'ONGOING': '进行中',
          'ENDED': '已结束',
          'CANCELLED': '已取消'
        }
        return statusMap[mappedStatus] || '未知'
      }

      // 获取状态样式
      const getStatusClass = (status) => {
        const mappedStatus = mapStatusToFrontend(status)
        const classMap = {
          'DRAFT': 'status-draft',
          'PUBLISHED': 'status-published',
          'ONGOING': 'status-ongoing',
          'ENDED': 'status-ended',
          'CANCELLED': 'status-cancelled'
        }
        return classMap[mappedStatus] || ''
      }

      // 格式化日期
      const formatDate = (date) => {
        if (!date) return ''
        return new Date(date).toLocaleString('zh-CN')
      }

      // 截断文本
      const truncateText = (text, maxLength = 50) => {
        if (!text) return ''
        if (text.length <= maxLength) return text
        return text.substring(0, maxLength) + '...'
      }





    // 监听路由参数变化
    watch(() => route.params.id, async (newId) => {
      if (newId) {
        await fetchActivityDetail(newId)
        await fetchCommentInfo(newId)
      }
    })
    
    // 监听活动详情变化，更新报名状态
    watch(() => activity.value, async (newActivity) => {
      if (newActivity && isAuthenticated.value) {
        try {
          const status = await getRegistrationStatus(newActivity.id)
          registered.value = status.registered || false
        } catch (error) {
          console.error('检查报名状态失败:', error)
        }
      }
    }, { deep: true })
    
    // 监听平均评分变化
    watch(() => averageScore.value, (newVal) => {
      displayScore.value = newVal
    })

    onMounted(async () => {
      const activityId = route.params.id
      // 获取用户信息
      await fetchUserInfo()
      // 获取活动详情
      await fetchActivityDetail(activityId)
      // 获取评论信息
      await fetchCommentInfo(activityId)
      // 获取分类列表
      try {
        const response = await getCategoryList()
        categories.value = response.data || []
      } catch (error) {
        console.error('获取分类列表失败:', error)
      }
    })
    
    return {
        activity,
        comments,
        relatedActivities,
        averageScore,
        commentCount,
        displayScore,
        loading,
        registering,
        cancelling,
        deleting,
        submittingComment,
        registered,
        canComment,
        showCommentDialog,
        commentForm,
        commentRules,
        commentFormRef,
        commentPageNum,
        commentPageSize,
        isOwner,
        isAuthenticated,
        canRegister,
        organizerName,
        organizerAvatar,
        organizerActivityCount,
        handleRegister,
        handleCancelRegister,
        handleDeleteActivity,
        handleSubmitComment,
        resetCommentForm,
        handleCommentSizeChange,
        handleCommentCurrentChange,
        getStatusText,
        getStatusClass,
        getCategoryName,
        editActivity,
        goToLogin,
        goBack,
        formatDate,
        truncateText
    }
  }
}
</script>

<style scoped>
.activity-detail {
  padding: 20px 0;
}

.page-header {
  margin-bottom: 30px;
}

.loading-state {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.detail-content {
  max-width: 100%;
}

.activity-header {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.header-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-basic-info {
  padding: 30px;
}

.activity-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.activity-category {
  background: #e4e7ed;
  color: #606266;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.activity-status {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.activity-status.hot {
  background-color: #ff4d4f;
  color: #fff;
}

.status-draft {
  background: #e4e7ed;
  color: #909399;
}

.status-published {
  background: #ecf5ff;
  color: #409eff;
}

.status-ongoing {
  background: #f0f9ff;
  color: #67c23a;
}

.status-ended {
  background: #f5f7fa;
  color: #909399;
}

.status-cancelled {
  background: #fef0f0;
  color: #f56c6c;
}

.activity-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  line-height: 1.4;
}

.activity-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
}

.stat-item .el-icon {
  color: #409eff;
  font-size: 16px;
}

.activity-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.activity-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.activity-description {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  word-break: break-word;
}

.activity-description img {
  max-width: 100%;
  height: auto;
  margin: 16px 0;
  border-radius: 4px;
}

.comments-section {
  margin-top: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.score-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.average-score {
  font-size: 24px;
  font-weight: 600;
  color: #ff9800;
}

.comment-count {
  color: #909399;
  font-size: 14px;
}

.comment-item {
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  font-weight: 500;
  color: #303133;
}

.comment-content {
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
  margin-bottom: 10px;
}

.comment-time {
  font-size: 12px;
  color: #909399;
}

.empty-comments {
  padding: 60px 20px;
}

.comments-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.organizer-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.organizer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.organizer-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.organizer-description {
  font-size: 14px;
  color: #909399;
}

.info-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #909399;
}

.info-value {
  font-size: 14px;
  color: #606266;
  text-align: right;
}

.related-item {
  margin-bottom: 16px;
}

.related-item:last-child {
  margin-bottom: 0;
}

.related-link {
  text-decoration: none;
  display: block;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 6px;
  transition: background 0.3s;
}

.related-link:hover {
  background: #ecf5ff;
}

.related-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 6px;
}

.related-info {
  font-size: 12px;
  color: #909399;
}

.empty-related {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

/* 错误状态 */
.error-state {
  text-align: center;
  padding: 60px 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .activity-basic-info {
    padding: 20px;
  }
  
  .activity-title {
    font-size: 24px;
  }
  
  .activity-stats {
    flex-direction: column;
    gap: 12px;
  }
  
  .activity-actions {
    flex-direction: column;
  }
  
  .activity-content {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .header-image {
    height: 200px;
  }
  
  .activity-basic-info {
    padding: 20px;
  }
}
</style>